<template><div>
   <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
  />
  
</form>
<van-grid :border="false" :column-num="4" gutter="10" class="search-list">
  <van-grid-item v-for="(ig,index) in lists" :key="index" @click="goZhuanqu(ig.class)">
    <van-image :src="ig.img"/>
    <p>{{ig.content}}</p>
  </van-grid-item>
</van-grid>
<van-empty description="选好物上得物" v-if="isFalse"/>
   <div v-for="(item, index) in valList" :key="index"  @click="goDetail(item.goodsid)" >
           <van-card
      :tag="item.type"
      :price="item.price"
      :desc="item.msg"
      :title="item.name"
      :thumb="item.img"
       v-if="isSearch"
    /> 
</div>

</div>
 
</template>

<script>
import { Toast } from 'vant';
import mouth from '../../../../public/utils/mouth'
export default {
  data() {
    return {
      value: '',
      isSearch:false,
       lists: [
        {
          img: require("../../../assets/imgs/list1_03.jpg"),
          content: "Nike",
          class:"nike"
        },
        {
          img:require("../../../assets/imgs/list1_05.jpg"),
          content: "Addidas",
           class:"ad"
        },
        {
          img: require("../../../assets/imgs/list1_07.jpg"),
          content: "李宁",
           class:"ln"
        },
        {
          img: require("../../../assets/imgs/list1_09.jpg"),
          content: "ANTA",
           class:"anta"
        }
        ,{
          img: require("../../../assets/imgs/list1_15.jpg"),
          content: "AJ",
           class:"aj"
        },{
          img: require("../../../assets/imgs/list1_17.jpg"),
          content: "PUMP",
          class:"pump"
        }
      ],
      isFalse:true,
      valList:[
         {
          img: require("../../../assets/imgs/list1_03.jpg"),
          price: "666",
          msg:"asdsadas",
          name:"Nike",
          type : '0'
        },
      ]
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
         mouth.get("/like/findAll",{
          params:{
            name: val
          }
         })
        .then((res) => {
          this.valList = res.data.data[0].gid;
          this.isFalse = false;
          this.isSearch = true;
          console.log(res.data.data[0].gid);
        })
        .catch((err) => {
          console.log("出错了", err);
        });
    },
    onCancel() {
      Toast('取消');
    },
       goDetail(id) {
   this.$router.push("/DetailAll?id=" + id);
    },
    goZhuanqu(name){
      // this.$router.push("/DetailAll?id=" + id);
      this.$router.push("./ZhuanQu?name="+name)
    }
  },
};
</script>

<style>
.search-list{
  font-size: 0.12rem;
  color: cyan;
  font-weight: bold;
  text-align: center;
}
</style>